<template>

  <!--  <SkinCard :icon="dotaImg" title="热门DOTA2推荐" :list="dota2List" data-type="dota2" />-->
  <v-container class="mt-16" style="max-width: 1500px">
    <Banner :list="bannerList"/>
    <Feature class="my-16"/>

    <SkinCard :icon="csgoImg" :list="csgoList" data-type="csgo" title="热门CS GO推荐"/>

    <Banner3/>
  </v-container>
  <!--  <Banner2 :list="banner2List"/>-->

</template>

<script lang="ts">
import {defineComponent, reactive, toRefs} from 'vue'
import Banner from './banner/Index.vue'
import Feature from './feature/Index.vue'
import SkinCard from './skin-card/Index.vue'
import Banner2 from './banner2/Index.vue'
import Banner3 from './banner3/Index.vue'

import {banner2List, bannerList, csgoList, dota2List} from './data'
import dotaImg from '@/static/img/icon/dota.png'
import csgoImg from '@/static/img/icon/csgo.png'

export default defineComponent({
  name: 'Home',
  components: {
    Banner,
    Feature,
    SkinCard,
    Banner2,
    Banner3
  },
  setup() {
    const state = reactive({
      bannerList,
      csgoList,
      dota2List,
      banner2List,
      showModal: true
    })

    return {
      ...toRefs(state),
      dotaImg,
      csgoImg
    }
  }
})
</script>

<style lang="scss" scoped>
</style>
